import './aside.scss'
import common from '../BaseComponent/index.js'
class aside extends common { 
    constructor(options) { 
        super(options)
        const defaultOptions = {
            element: '',
            color: 'gray',
            position: 'right',
            model: 'circle',
            backtop: true,
            backhome: true,
            url:''
        }
        this.options = Object.assign(defaultOptions, options)
        this.$container = this.options.element
        this._inint()
        this.fadein = null
        this.fadeout =null
    }
    _inint() { 
        let $backhome = null
        let $backtop = null
        let time_out = null
        let page_title = document.querySelector('.page-title')
        page_title.classList.add('page-title-Margin')
        this.$container.classList.add('home-back')
        if (this.options.position == "right") {
            this.$container.classList.add("home-back-right")
        }
        else { 
            this.$container.classList.add("home-back-left")
        }
        if (this.options.backtop) { 
            $backtop = this.createDiv("backTop")
            $backtop.classList.add('icon-shangjiantou')
            // 回到顶部 
            $backtop.addEventListener('click', (e) => { 
                this.options.callback.call(this)
                time_out = setInterval(() => {
                    var position = document.documentElement.scrollTop
                    var speed = Math.floor(-position / 4)
                    if (position == 0) { 
                        clearInterval(time_out)
                       return 
                   }
                    document.documentElement.scrollTop = position + speed
                
                }, 30);
            })
            $backtop.classList.add("icon-shangjiantou")
            this.$container.appendChild($backtop)
        }
        if (this.options.backhome) {
            $backhome = this.createDiv('backHome')
            $backhome.classList.add('icon-shouyefill')
            $backhome.addEventListener('click', () => { 
                this.jump()
                console.log('跳转到首页');
            })
            $backhome.classList.add("icon-shouyefill")
            this.$container.appendChild($backhome)
        }
        
        if (this.options.color == "gray") {
            $backhome.classList.add('home-back-gray')
            $backtop.classList.add('home-back-gray')
            
        }
        else { 
            $backhome.classList.add('home-back-red')
            $backtop.classList.add('home-back-red')
        }
        window.addEventListener('scroll',()=>{
            if (document.documentElement.scrollTop > 300) {
                this.$container.classList.add("home-back-show")
               this._fadeIn(this.$container)
            }
            else { 
                var that =this
                function remove() { 
                    that.$container.classList.remove("home-back-show")
                }
                this._fadeOut(this.$container,remove)
            }
        })
    }
    // 淡入
    _fadeIn(element) {
        clearInterval(this.fadein)  
        clearInterval(this.fadeout)
        if (element.style.opacity != 1) { 
            var speed = speed || 30
            var num = 0
            this.fadein = setInterval(() => {
                num++;
                element.style.opacity = num / 10
                if (num >= 10) { 
                    clearInterval(this.fadein)
                }
            }, speed);
        }
    }
    //淡出
   _fadeOut(element,back) { 
        clearInterval(this.fadein)  
        clearInterval(this.fadeout)
        if (element.style.opacity != 0) { 
            var speed = speed || 30
            var num = 10
            this.fadeout = setInterval(() => {
                num--;
                element.style.opacity = num / 10
                if (num <= 0) { 
                    clearInterval(this.fadeout)
                    back()
                }
            }, speed);
        }
    }

}
export default aside